<template>
    <!-- 解决密码框浏览器自动填充密码问题 -->
    <div style="width:100%;">
        <input type="text" style="display:none;">
        <input type="password" style="display:none;">
        <el-input
            type="password"
            :readonly="readonly_type"
            ref="passwordInput"
            auto-complete="new-password"
            v-model="password"
            @input="handleInput"
            @blur="handleBlur($event)"
            @focus="handleFocus($event)"
            :placeholder="$t('common.input_plactholder')"
        ></el-input>
        <div>{{readonly_type}}-{{value}}-{{password}}</div>
    </div>
</template>

<script>
export default {
  components: {
  },
    name: "password_input",
    props:{
         value: String,
    },
    data() {
        return{
            password:this.value?this.value:'',
            readonly_type:true,
        }
    },
    created(){
        console.log(this.value)
    },
    
    methods: {
        handleInput(){
            this.$emit('input', event.target.value)
        },
        handleBlur(event){
            this.readonly_type=true
            this.$emit('blur',event)
        },
        handleFocus(event){
            this.readonly_type=false
            this.$emit('focus',event)
        },
    }
};
</script>

<style scoped lang="less">
/deep/.el-select-dropdown__item{
    padding: 0;
}
.el-select-dropdown__item.is-disabled{
    cursor: pointer;
}
</style>